<script setup>
  import { onMounted, ref } from 'vue'
  import {
    onLoad,
    onShow,
    onReachBottom,
    onPullDownRefresh,
    onShareAppMessage,
  } from '@dcloudio/uni-app'
  import { http } from '@/utils/http.js'
  import Tabbar from '@/components/TabbarCustom.vue'
  import { useUsercodeStore } from '@/store/usercode.js'

  //tab
  const activeIndex = ref(2)
  const clevel = ref(1)

  const txList = ref([])
  const wxList = ref([])
  const treasureList = ref([])
  const integralList = ref([])
  const dataList = ref([])
  const currentPage = ref(1)
  const loading = ref(true)

  function changeClevel(key) {
    wxList.value = []
    clevel.value = key
    currentPage.value = 1
    getdrawList()
    // if (
    // 	userCodeStore.usercode.isTrans == 1 &&
    // 	userCodeStore.usercode.token
    // ) {
    // 	getdrawList()
    // }
  }

  function chooseTab(name, title) {
    txList.value = []
    wxList.value = []
    treasureList.value = []
    integralList.value = []
    dataList.value = []
    currentPage.value = 1
    activeIndex.value = name
    getdrawList()

    // if (
    // 	userCodeStore.usercode.isTrans == 1 &&
    // 	userCodeStore.usercode.token
    // ) {
    // 	getdrawList()
    // }
  }
  async function getdrawList() {
    const res = await http.request({
      url: '/api/box/boxList',
      method: 'POST',
      data: {
        clevel: activeIndex.value == 2 ? clevel.value : undefined,
        page: currentPage.value,
        limit: 10,
        type:
          activeIndex.value == 4 || activeIndex.value == 5
            ? 2
            : activeIndex.value,
        scene: 0,
        keywords: '',
        is_integral:
          activeIndex.value == 4 ? 1 : activeIndex.value == 5 ? -1 : 0,
      },
    })
    // dataList.value = [...dataList.value, ...res.data]
    if (activeIndex.value == 1) {
      txList.value = [...txList.value, ...res.data]
    } else if (activeIndex.value == 2) {
      wxList.value = [...wxList.value, ...res.data]
    } else if (activeIndex.value == 3) {
      treasureList.value = [...treasureList.value, ...res.data]
    } else if (activeIndex.value == 4) {
      integralList.value = [...integralList.value, ...res.data]
    } else if (activeIndex.value == 5) {
      dataList.value = [...dataList.value, ...res.data]
    }
    // if (res.address_status == 1) {
    //   uni.utils.toast('背包商品即将自动发货，请填写地址。')
    //   setTimeout(() => {
    //     uni.navigateTo({
    //       url: `/minePage/editaddress/index`,
    //     })
    //   }, 2000)
    // }
  }
  //图片数量
  const imgnum = ref(4)

  // 轮播图
  const info = ref()
  const modeIndex = ref(1)
  const styleIndex = ref(1)
  const dotsStyles = ref({
    backgroundColor: '#fff',
    border: 'none',
    color: '#fff',
    selectedBackgroundColor: '#000',
    selectedBorder: 'none',
    width: '3',
    height: '3',
  })
  const swiperDotIndex = ref(0)
  const current = ref(0)
  const mode = ref('dot')
  const showpopup = ref('')
  const showObj = ref([])
  async function getBanner() {
    const res = await http.request({
      url: '/api/config/getBanner',
      method: 'POST',
      data: {
        type: 2,
      },
    })
    info.value = res.data
    if (!uni.getStorageSync('homeShow')) {
      const ress = await http.request({
        url: '/api/config/getBanner',
        method: 'POST',
        data: {
          type: 3,
        },
      })
      showObj.value = ress.data
      if (showObj.value.length > 0) {
        uni.setStorageSync('homeShow', 1)
        showpopup.value.open('center')
      }
    }
  }
  function toPage() {
    if (showObj.value.length > 0) {
      uni.navigateTo({
        url: showObj.value[0].url,
      })
    }
  }
  function change(e) {
    current.value = e.detail.current
  }

  function clickItem(e) {
    swiperDotIndex.value = e
  }

  function onBanner(index) {
    console.log(22222, index)
  }

  //跳转天选
  function goTX(id) {
    uni.navigateTo({
      url: `/drawPage/txDraw/index?id=${id}`,
    })
  }
  //跳转无限
  function goWX(id) {
    uni.navigateTo({
      url: `/drawPage/wxDraw/index?id=${id}`,
    })
  }
  function goIntegral(id) {
    uni.navigateTo({
      url: `/drawPage/wxDraw/index?id=${id}`,
    })
  }

  //跳转寻宝
  function goTreasure(id) {
    uni.navigateTo({
      url: `/drawPage/treasureDraw/index?id=${id}`,
    })
  }

  function goTop() {
    uni.pageScrollTo({
      scrollTop: 0,
      duration: 300,
    })
  }
  onShareAppMessage(() => {
    const userCodeStore = useUsercodeStore()
    const user = userCodeStore.usercode.user
    console.log(user)
    return {
      title: '惊喜好物等你来选',
      path: `/pages/home/index?pid=${user}`,
    }
  })

  onMounted(() => {
    // getdrawList()
  })
  onShow(() => {
    const userCodeStore = useUsercodeStore()
    const { token, is_effect } = userCodeStore.usercode

    // if (!token || is_effect != 1) {
    //   uni.redirectTo({
    //     url: `/homePage/mall/index?id=0`,
    //   })
    //   return
    // }
  })
  onLoad((options) => {
    // console.log(userCodeStore.usercode)

    // if (!token || is_effect != 1) {
    //   uni.redirectTo({
    //     url: `/homePage/mall/index?id=0`,
    //   })
    //   return
    // }

    // uni.hideTabBar()
    txList.value = []
    wxList.value = []
    treasureList.value = []
    integralList.value = []
    dataList.value = []
    currentPage.value = 1
    getdrawList()
    getBanner()
    // console.log(options);
    // const {
    // 	pid
    // } = options
    // uni.setStorageSync('pid', pid);

    // if (
    // 	userCodeStore.usercode.isTrans == 1 &&
    // 	userCodeStore.usercode.token
    // ) {
    // }
  })
  // 上拉加载
  function refresh() {
    currentPage.value++
    // if (
    // 	userCodeStore.usercode.isTrans == 1 &&
    // 	userCodeStore.usercode.token
    // ) {
    getdrawList()
    // }
  }
  // 上拉加载
  onReachBottom(() => {
    currentPage.value++
    // if (
    // 	userCodeStore.usercode.isTrans == 1 &&
    // 	userCodeStore.usercode.token
    // ) {
    getdrawList()
    // }
  })
  // 下拉刷新
  onPullDownRefresh(() => {
    currentPage.value = 1
    txList.value = []
    wxList.value = []
    treasureList.value = []
    integralList.value = []
    dataList.value = []
    // if (
    // 	userCodeStore.usercode.isTrans == 1 &&
    // 	userCodeStore.usercode.token
    // ) {
    getdrawList()
    // }
    uni.stopPullDownRefresh() // 停止刷新
    uni.utils.toast('刷新成功')
  })
</script>

<template>
  <view class="draw" v-if="loading">
    <!-- 轮播图 -->
    <uni-swiper-dot
      class="uni-swiper-dot-box"
      @clickItem="clickItem"
      :info="info"
      :current="current"
      :mode="mode"
      :dots-styles="dotsStyles"
      field="content"
    >
      <swiper
        class="swiper-box"
        @change="change"
        :current="swiperDotIndex"
        autoplay="true"
      >
        <swiper-item v-for="(item, index) in info" :key="index">
          <image
            style="height: 424rpx; width: 100%; border-radius: 10rpx"
            :src="item.img"
          ></image>
        </swiper-item>
      </swiper>
    </uni-swiper-dot>
    <y-tabs v-model="activeIndex" :sticky="true" @change="chooseTab">
      <y-tab class="y-tab-virtual" :title="'无限冲锋'" name="2">
        <view class="clevelBox">
          <view
            :class="{ clevelItem: true, clevelItemed: clevel == 1 }"
            @click="changeClevel(1)"
          >
            初阶
          </view>
          <view
            :class="{ clevelItem: true, clevelItemed: clevel == 2 }"
            @click="changeClevel(2)"
          >
            中阶
          </view>
          <view
            :class="{ clevelItem: true, clevelItemed: clevel == 3 }"
            @click="changeClevel(3)"
          >
            高阶
          </view>
        </view>
        <view class="content-wrap">
          <view
            v-for="(item, index) in wxList"
            :key="index"
            :class="{
              'wx-item': true,
              'wx-itemed': item.is_kh_open == 1 ? true : false,
            }"
            @click="goWX(item.id)"
          >
            <image
              v-if="item.isMiaowa == 1"
              class="double-box"
              src="https://ojqn.wm2177.com/wechat_imgs/double-box.png??"
              mode="widthFix"
            ></image>
            <image
              v-if="item.mine_id && item.mine_id != 0"
              class="feedback"
              src="https://ojqn.wm2177.com/wechat_imgs/gold/gold1.gif"
              mode="widthFix"
            ></image>
            <!--       <div v-if="item.is_kh_open == 1" class="line_move"></div>
            <div v-if="item.is_kh_open == 1" class="line_move"></div>
            <div v-if="item.is_kh_open == 1" class="line_move"></div>
            <div v-if="item.is_kh_open == 1" class="line_move"></div> -->
            <view class="wx-left">
              <image
                style="height: 220rpx; width: 220rpx"
                :src="item.img"
                mode=""
              ></image>
            </view>
            <view class="wx-right">
              <view
                style="font-size: 28rpx; font-weight: 600; color: #3d3d3d"
                >{{ item.name }}</view
              >
              <view class="money" style="color: #eb2c2c">
                <text style="font-size: 20rpx">￥</text>
                <text style="font-size: 30rpx">{{ item.price }}</text>
              </view>
              <view class="reward-list">
                <view
                  style="
                    margin-bottom: 10rpx;
                    font-size: 20rpx;
                    font-weight: 600;
                  "
                  >奖池列表</view
                >
                <view class="scroll-list">
                  <view class="scroll" :style="{ '--imgnum': 6 }">
                    <view
                      class="scroll-item"
                      v-for="(goods, j) in [
                        ...item.box_goods,
                        ...item.box_goods,
                      ]"
                      :key="j"
                    >
                      <image
                        style="width: 68rpx; height: 68rpx"
                        :src="goods.img"
                        mode=""
                      ></image>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </y-tab>
      <y-tab class="y-tab-virtual" :title="'天选之人'" name="1">
        <view class="content-wrap">
          <view
            v-for="(item, index) in txList"
            :key="index"
            class="tx-item"
            @click="goTX(item.id)"
          >
            <image :src="item.img" mode=""></image>
            <view class="top">
              <!-- <text
                style="font-size: 46rpx; color: #1f1f1f"
                :class="{ smallSize: item.name.length > 8 }"
                >{{ item.name }}</text
              > -->
              <view class="corner" style="font-size: 26rpx">
                {{ item.name }}
              </view>
              <view class="" style="">
                <text style="font-size: 26rpx">￥</text>
                <text style="margin-right: 4rpx; font-size: 26rpx">{{
                  item.price
                }}</text>
                <text style="font-size: 24rpx">每抽</text>
              </view>
              <view style="font-size: 26rpx; width: 260rpx; text-align: right">
                <text style="margin-right: 20rpx"
                  >第{{ item.case_name }}箱</text
                >
                <text>剩余</text>
                <text style="color: red; font-size: 30rpx">{{
                  item.leftover
                }}</text>
                <text>/{{ item.sum }}</text>
              </view>
            </view>
          </view>
        </view>
        <!-- </scroll-view> -->
      </y-tab>
      <y-tab class="y-tab-virtual" :title="'欧皇寻宝'" name="3">
        <view class="content-wrap">
          <view
            class="ouhuang-item"
            style=""
            v-for="(item, index) in treasureList"
            :key="index"
          >
            <image
              :src="item.img"
              style=""
              @click="goTreasure(item.id)"
              mode=""
            ></image>
            <view class="text" style="">
              <view class="">{{ `${item.name}(￥${item.price})` }} </view>
              <view class="">
                余量{{
                  Math.floor(
                    (Number(item.leftover) / Number(item.extract_ci)) * 100
                  )
                }}%
              </view>
            </view>
          </view>
        </view>
      </y-tab>
      <y-tab class="y-tab-virtual" :title="'积分专区'" name="4">
        <view class="content-wrap">
          <view
            v-for="(item, index) in integralList"
            :key="index"
            class="wx-item"
            style="background: #fff"
            @click="goIntegral(item.id)"
          >
            <view class="wx-left">
              <image
                style="height: 220rpx; width: 220rpx"
                :src="item.img"
                mode=""
              ></image>
            </view>
            <view class="wx-right">
              <view
                style="font-size: 28rpx; font-weight: 600; color: #3d3d3d"
                >{{ item.name }}</view
              >
              <view class="money" style="color: #eb2c2c">
                <text style="font-size: 30rpx">{{ item.price }}</text>
                <text style="font-size: 20rpx">积分</text>
              </view>
              <view class="reward-list">
                <view
                  style="
                    margin-bottom: 10rpx;
                    font-size: 20rpx;
                    font-weight: 600;
                  "
                  >奖池列表</view
                >
                <view class="scroll-list">
                  <view class="scroll" :style="{ '--imgnum': 6 }">
                    <view
                      class="scroll-item"
                      v-for="(goods, j) in [
                        ...item.box_goods,
                        ...item.box_goods,
                      ]"
                      :key="j"
                    >
                      <image
                        style="width: 68rpx; height: 68rpx"
                        :src="goods.img"
                        mode=""
                      ></image>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </y-tab>
      <y-tab class="y-tab-virtual" :title="'道具狂欢'" name="5">
        <view class="content-wrap">
          <view
            v-for="(item, index) in dataList"
            :key="index"
            :class="{
              'wx-item': true,
              'wx-itemed': item.is_kh_open == 1 ? true : false,
            }"
            @click="goWX(item.id)"
          >
            <image
              class="double-box"
              :src="item.goodsPay.img"
              mode="widthFix"
            ></image>
            <image
              v-if="item.mine_id && item.mine_id != 0"
              class="feedback"
              src="https://ojqn.wm2177.com/wechat_imgs/gold/gold1.gif"
              mode="widthFix"
            ></image>

            <view class="wx-left">
              <image
                style="height: 220rpx; width: 220rpx"
                :src="item.img"
                mode=""
              ></image>
            </view>
            <view class="wx-right">
              <view
                style="font-size: 28rpx; font-weight: 600; color: #3d3d3d"
                >{{ item.name }}</view
              >
              <view class="money" style="color: #eb2c2c">
                <text style="font-size: 20rpx">￥</text>
                <text style="font-size: 30rpx">{{ item.price }}</text>
              </view>
              <view class="reward-list">
                <view
                  style="
                    margin-bottom: 10rpx;
                    font-size: 20rpx;
                    font-weight: 600;
                  "
                  >奖池列表</view
                >
                <view class="scroll-list">
                  <view class="scroll" :style="{ '--imgnum': 6 }">
                    <view
                      class="scroll-item"
                      v-for="(goods, j) in [
                        ...item.box_goods,
                        ...item.box_goods,
                      ]"
                      :key="j"
                    >
                      <image
                        style="width: 68rpx; height: 68rpx"
                        :src="goods.img"
                        mode=""
                      ></image>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </y-tab>
    </y-tabs>
    <uni-popup ref="showpopup" type="bottom">
      <view class="showpopup-content" v-if="showObj.length > 0">
        <image
          @click="toPage()"
          style="width: 600rpx"
          :src="showObj[0].img"
          mode="widthFix"
        ></image>
      </view>
    </uni-popup>
    <Tabbar :current="1"></Tabbar>
    <view class="scroll-top" @click="goTop">
      <image
        src="https://ojqn.wm2177.com/wechat_imgs/scroll-top.png"
        style="width: 60rpx; height: 60rpx"
        mode=""
      >
      </image>
    </view>
  </view>
</template>
<style lang="scss">
  .ouhuang-item {
    // color: #ffffff;
    width: 720rpx;
    margin: 0 auto;
    position: relative;
    margin-bottom: 30rpx;
    overflow: hidden;
    // box-shadow: 5rpx 5rpx 10rpx #e5e5e6;
    image {
      height: 324rpx;
      width: 100%;
      box-sizing: border-box;
      border-radius: 16rpx;
    }
    .text {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 28rpx;
      // position: absolute;
      // bottom: 0;
      width: 100%;
      // padding: 10rpx 20rpx;
      box-sizing: border-box;
      // background: rgba(0, 0, 0, 0.4);
    }
  }
  page {
    background: #f1f1f1;
  }
  .smallSize {
    font-size: 32rpx !important;
  }
  .clevelBox {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 20rpx;
    box-sizing: border-box;
    .clevelItem {
      margin: 0 10rpx;
      padding: 6rpx 16rpx;
      border-radius: 16rpx;
      background: #e4e4e4;
      font-size: 26rpx;
    }
    .clevelItemed {
      // margin: 0 20rpx;
      border-radius: 12rpx;
      background: orange !important;
      color: #fff;
    }
  }
  .feedback {
    width: 40rpx;
    position: absolute;
    left: 0rpx;
    top: 10rpx;
  }
  .double-box {
    width: 80rpx;
    position: absolute;
    right: 20rpx;
    top: 70rpx;
  }
  .wx-itemed {
    /* font-weight: 800;
    border-radius: 8rpx; */
    /*  background: linear-gradient(
      45deg,
      rgb(242, 97, 94),
      rgb(234, 150, 104),
      rgb(251, 200, 2),
      rgb(174, 9, 43)
    ); */
    /* background: linear-gradient(
      45deg,
      rgb(54 159 190),
      #bfcfdb,
      rgb(14 138 242),
      rgb(174 236 227)
    );
    background-size: 400%;
    animation: gradientBackground 2s linear alternate infinite; */
    animation: gradientBackground 1.5s linear alternate infinite;
  }
  @keyframes gradientBackground {
    0% {
      transform: scale(1);
      box-shadow: inset 0 0 0 0 rgba(242, 97, 43, 0.7);
    }
    70% {
      transform: scale(1.02);
      box-shadow: inset 0 0 40rpx 40rpx rgba(242, 97, 94, 0);
    }
    100% {
      transform: scale(1);
      box-shadow: inset 0 0 0 0 rgba(234, 150, 104, 0);
    }
  }
  .line_move {
    position: absolute;
  }
  .line_move:nth-child(1) {
  }
  .line_move:nth-child(1) {
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    animation: run1 1.5s linear infinite;
    animation-delay: 0s;
    background: linear-gradient(to right, #fff, #acd, cyan);
  }
  .line_move:nth-child(2) {
    top: 0;
    right: 0;
    height: 100%;
    width: 5px;
    animation: run2 1.5s linear infinite;
    /* animation-delay: 1s; */
    background: linear-gradient(to bottom, #fff, #acd, cyan);
  }
  .line_move:nth-child(3) {
    bottom: 0;
    left: 0;
    height: 5px;
    width: 100%;
    animation: run3 1.5s linear infinite;
    animation-delay: 2s;
    background: linear-gradient(to right, #fff, #acd, cyan);
  }
  .line_move:nth-child(4) {
    top: 0;
    left: 0;
    height: 100%;
    width: 5px;
    animation: run4 1.5s linear infinite;
    /* animation-delay: 3s; */
    background: linear-gradient(to top, #fff, #acd, cyan);
  }
  @keyframes run1 {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(100%);
    }
  }
  @keyframes run2 {
    from {
      transform: translateY(-100%);
    }
    to {
      transform: translateY(100%);
    }
  }
  @keyframes run3 {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(-100%);
    }
  }
  @keyframes run4 {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(-100%);
    }
  }
</style>
<style lang="scss" scoped>
  .draw {
    // height: 100vh;
    // padding-top: 192rpx;
    overflow: hidden;
    background: linear-gradient(to bottom, #d7d2fd -3%, transparent 22%);
    box-sizing: border-box;

    .uni-swiper-dot-box {
      width: 100%;
    }

    ::v-deep .uni-swiper__dots-item {
      margin-bottom: 30rpx !important;
    }

    .swiper-box {
      height: 424rpx;
    }

    .swiper-item {
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 424rpx;
      color: #fff;
    }
  }

  .scroll-top {
    width: 60rpx;
    height: 60rpx;
    position: fixed;
    bottom: 227rpx;
    right: 30rpx;
    background-color: #fff;
    border-radius: 50%;
    overflow: hidden;
  }

  /* #ifdef MP-QQ || MP-BAIDU || MP-TOUTIAO || MP-LARK || MP-KUAISHOU */
  .y-tab-virtual {
    position: relative;
    flex-shrink: 0;
    width: 100%;
    height: auto;
  }

  /* #endif */

  .content-wrap {
    height: auto;
    // padding: 30rpx 20rpx 0rpx 20rpx;
    // overflow-y: auto;
    // overflow-x: hidden;
    box-sizing: border-box;

    .tx-item {
      // width: 720rpx;
      // height: 375rpx;
      margin: 0 auto;
      position: relative;
      margin-bottom: 30rpx;
      // padding: 24rpx 28rpx 0 24rpx;
      // background: url('https://ojqn.wm2177.com/wechat_imgs/txbg4.png') no-repeat;
      background-size: 100%;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 100%;
      align-items: center;
      // box-shadow: 5rpx 5rpx 10rpx #e5e5e6;
      // overflow: hidden;
      image {
        width: 720rpx;
        height: 375rpx;
        border-radius: 16rpx;
      }
      .top {
        width: 720rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        // position: absolute;
        // width: 100%;
        // bottom: -30rpx;
        // background: rgba(0, 0, 0, 0.5);
        // padding: 10rpx 20rpx;
        box-sizing: border-box;
      }

      .corner {
        // line-height: 68rpx;
        // font-size: 34rpx;
        margin-right: 6rpx;
        font-style: italic;
        white-space: nowrap; /* 不换行 */
        overflow: hidden; /* 隐藏超出的内容 */
        text-overflow: ellipsis; /* 用省略号表示被隐藏的部分 */
        width: 240rpx; /* 设置最大宽度以限制文本的显示长度 */
        display: inline-block;
      }

      &:last-child {
        margin-bottom: 300rpx;
      }
    }

    .wx-item {
      width: 720rpx;
      margin: 0 auto;
      margin-top: 20rpx;
      margin-bottom: 20rpx;
      display: flex;
      align-items: center;
      height: 256rpx;
      // margin-bottom: 26rpx;
      // margin: 10rpx 0;
      padding: 24rpx 20rpx;
      box-sizing: border-box;
      // border-bottom: 2rpx solid #fafafa;
      position: relative;
      background: #ffffff;
      overflow: hidden;
      border-radius: 16rpx;
      box-shadow: 5rpx 5rpx 10rpx #e5e5e6;
      // background-color: pink;
      .wx-left {
        margin-right: 22rpx;
        border-radius: 6rpx;
        // overflow: hidden;
      }

      .wx-right {
        height: 100%;
        width: 62%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .reward-list {
          width: 100%;
          height: 128rpx;
          padding: 12rpx 0 0 4rpx;
          border-radius: 4rpx;
          // background-color: #f9fafc;
          box-sizing: border-box;

          .scroll-list {
            width: 430rpx;
            overflow: hidden;

            // width: calc(72rpx * var(--imgnum));
            .scroll {
              height: 84rpx;
              display: flex;
              // width: calc(72rpx * var(--imgnum));
              animation: scroll 20s linear infinite;

              .scroll-item {
                width: 72rpx;
                height: 72rpx;
                // margin: 3rpx;
                border-radius: 6rpx;
                flex-shrink: 0;
                overflow: hidden;
                box-sizing: border-box;
              }
            }
          }
        }
      }

      &:last-child {
        margin-bottom: 300rpx;
      }
    }
  }

  @keyframes scroll {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(calc(-426rpx));
      /* 单个图片宽度 * 图片数量的一半 */
    }
  }

  ::v-deep .y-tabs {
    padding-top: 30rpx;
    top: -30rpx;
    border-radius: 36rpx;
    background-color: #f1f1f1;
  }

  ::v-deep .y-tabs__content {
    height: auto;
    // overflow: auto !important;
  }

  ::v-deep .y-tab__pane {
    // overflow: auto;
    height: auto !important;
  }

  ::v-deep .y-tabs__wrap {
    background-color: transparent !important;
  }

  ::v-deep .y-tabs__scroll {
    width: 680rpx !important;
    height: 64rpx;
    left: 35rpx;
  }

  ::v-deep .y-tab {
    height: 64rpx !important;
    margin: 0 2rpx;
    color: #1a1a1a !important;
    font-weight: 500 !important;
    z-index: 9 !important;
  }

  ::v-deep .y-tabs__nav {
    border-radius: 32rpx;
    background-color: #f4f2f2;
  }

  ::v-deep .y-tabs__nav .is-active {
    border-radius: 30rpx !important;
    margin: 0 !important;
    padding: 0 14rpx !important;
    background-color: $all-color !important;
    color: #3d3d3d !important;
  }

  ::v-deep .y-tab__text {
    font-size: 28rpx;
  }

  ::v-deep .y-tabs__bar {
    display: none !important;
    // width: 50% !important;
    // height: 100% !important;
    // transform: translate3d(0,0,0) !important;
    // border-radius: 32rpx !important;
    // bottom: 0 !important;
    // background-color: #7863ff !important;
  }
</style>
